<template>
	<div class="criterionId" id="criterionId">
		<div class="criterion-head">
			<span>运维考核</span>
		</div>
		<div style="border: 1px solid #2c6a60;width:1500px;margin-left: 42px">

			<a-table :columns="columns" :data-source="data" :pagination="false" size="middle" :row-selection="rowSelection">
				<div class="thead-item" style="margin-top: 10px;margin-right: 10px;">
					<a-checkbox @change="onCheckboxChange"></a-checkbox>
				</div>
				<a slot="name" slot-scope="text">{{ text }}</a>
				<span slot="operate" slot-scope class="operate-btn">
					<!-- <span class="detail">详情细则</span> -->
					<a-button style="color: #000000cc; background-color: #2c6a60; border-color: #2c6a60;font-weight: 600;letter-spacing: 6px;"  @click="showModal">考核打分</a-button>
				</span>

			</a-table>
		</div>
		<div style="margin-top:15px;margin-left:42px">
			<a-button style="color: #000000cc; background-color: #2c6a60; border-color: #2c6a60;font-weight: 600;letter-spacing: 6px;">公示</a-button>
		</div>
		<!-- 弹框区域 -->
		<a-modal title="运维考核" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel"
		 width="1000px" closable :footer="null">
			<div >
				<a-form class="pollutionForm" style="padding: 6px 41px;" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<a-row >
						<a-col :span="12" pull="1">
							<a-form-item label="被考核人姓名">
								<span style="color: #bebebe	;font-size: 18px;">张三</span>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="统计时间段">
								<span style="color: #bebebe	;font-size: 18px;">2020-06-01~2020-06-30</span>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row>
						<a-col :span="12" pull="1">
							<a-form-item label="上报事件个数">
								<span style="color: #bebebe	;font-size: 18px;">50</span>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="执行率">
								<span style="color: #bebebe	;font-size: 18px;">98%</span>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row>
						<a-col :span="12" pull="1">
							<a-form-item label="有效里程">
								<span style="color: #bebebe	;font-size: 18px;">14256.24公里</span>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="有效在线时长">
								<span style="color: #bebebe	;font-size: 18px;">200.25小时</span>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row>
						<a-col :span="24">
							<a-divider dashed></a-divider>
						</a-col>
					</a-row>
					<a-row>
						<a-col :span="11" pull="1">
							<a-form-item label="考核准则">
								<span style="color: #bebebe	;font-size: 18px;">XXXX考核方案</span>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row>
						<a-col :span="11" pull="1">
							<a-form-item label="考核细则">
								<span style="color: #bebebe	;font-size: 18px;">出勤</span>
							</a-form-item>
						</a-col>
						<a-col :span="11">
							<a-form-item label="考核评分">
								<a-input style="background-color: #207064; border: 0px solid #2a4341; color: #bebebe;" placeholder="95">
								</a-input>
							</a-form-item>
						</a-col>
						<a-col :span="2" style="color:#bebebe">(权重：10%)</a-col>
					</a-row>
					<a-row>
						<a-col :span="11" pull="1">
							<a-form-item label="考核细则">
								<span style="color: #bebebe	;font-size: 18px;">任务完成率</span>
							</a-form-item>
						</a-col>
						<a-col :span="11">
							<a-form-item label="考核评分">
								<a-input style="background-color: #207064; border: 0px solid #2a4341; color: #bebebe;" placeholder="99"/>
							</a-form-item>
						</a-col>
						<a-col :span="2" style="color:#bebebe;">(权重：10%)</a-col>
					</a-row>
					<a-row style="margin-left: 9%;">
						<a-col :span="23" style="margin-top: 15px;margin-left:480px;">
							<span style="margin-left: -30%; margin-right: 6%; color: #bebebe;">加权总分 95.6</span>
							<a-button style="letter-spacing: 8px;background-color:rgba(44, 106, 95);border:none"  @click="showCont" class="sousuobtn btn-style__class">确认</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>

		</a-modal>
	</div>
</template>

<script>
	const rowSelection = {
	  onChange: (selectedRowKeys, selectedRows) => {
	    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	  },
	  onSelect: (record, selected, selectedRows) => {
	    console.log(record, selected, selectedRows);
	  },
	  onSelectAll: (selected, selectedRows, changeRows) => {
	    console.log(selected, selectedRows, changeRows);
	  },
	};
	export default {
		name: "index",
		data() {
			return {
				columns: [],
				data: [],
				visible: false,
				confirmLoading: false,
				rowSelection,
			}
		},
		methods: {
			showModal() {
				this.visible = true;
			},
			handleOk(e) {
				this.ModalText = 'The modal will be closed after two seconds';
				this.confirmLoading = false;
				setTimeout(() => {
					this.visible = false;
					this.confirmLoading = false;
				}, 2000);
			},
			handleCancel(e) {
				console.log('Clicked cancel button');
				this.visible = false;
			},
			//确认
			showCont(){

			},
			//左边单选多选
			onCheckboxChange(){
				
			}
		},
		mounted() {
			const columns = [{
					title: "序号",
					key: "index",
					dataIndex: "index",
					align: "center",
					// width: "5%"
				}, {
					title: "姓名",
					key: "name",
					dataIndex: "name",
					align: "center",
					// width: "5%"
				}, {
					title: "统计时间段",
					key: "quantum",
					dataIndex: "quantum",
					align: "center",
					// width: "5%"
				}, {
					title: "上报事件个数",
					key: "events",
					dataIndex: "events",
					align: "center",
					// width: "5%"
				}, {
					title: "执行率",
					key: "implementation",
					dataIndex: "implementation",
					align: "center",
					// width: "5%"
				}, {
					title: "有效里程",
					key: "mileage",
					dataIndex: "mileage",
					align: "center",
					// width: "5%"
				},
				{
					title: "有效在线时长",
					key: "duration",
					dataIndex: "duration",
					align: "center",
					// width: "5%"
				}, {
					title: "考核得分",
					key: "Assessment ",
					dataIndex: "Assessment ",
					align: "center",
					// width: "5%"
				}, {
					title: "操作",
					key: "operate",
					scopedSlots: {
						customRender: "operate"
					},
					align: "center",
				}
			]
			const data = [{
					index: 1,
					name: "张三",
					quantum: "2020-06-01~2020-06-30",
					events: "50",
					implementation:"98%",
					mileage:"14256.24公里",
					duration:"200.25小时",
					Assessment :"99.54",			
				},
				{
					index: 2,
					name: "张三",
					quantum: "2020-06-01~2020-06-30",
					events: "50",
					implementation:"98%",
					mileage:"14256.24公里",
					duration:"200.25小时",
					Assessment :"99.54",		
				},
				{
					index: 3,
					name: "张三",
					quantum: "2020-06-01~2020-06-30",
					events: "50",
					implementation:"98%",
					mileage:"14256.24公里",
					duration:"200.25小时",
					Assessment :"99.54",		
				},
				{
					index: 4,
					name: "张三",
					quantum: "2020-06-01~2020-06-30",
					events: "50",
					implementation:"98%",
					mileage:"14256.24公里",
					duration:"200.25小时",
					Assessment :"99.54",		
				}
			]
			this.columns = columns;
			this.data = data;

		}
	
	}
</script>

<style scoped>
.ant-modal-body {
    padding-top: 0px;
}
.ant-divider-dashed {
  border-color: #2c6a60;
}
/* 选择框的颜色 */
#criterionId .ant-checkbox-indeterminate .ant-checkbox-inner::after{
  background-color: #37ddc0;
}
#criterionId .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}
#criterionId .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}
#criterionId .criterion-head {
	font-size: 24px;
	color: #00ffdc;
	padding: 6px 41px;
	line-height: 98px;
}

/* 表边框 */
#criterionId .ant-table-small {
	border: 1px solid #2c6a60;
	border-radius: 3px;
}

#criterionId .ant-table-thead tr th {
	color: #9fb043;
	background: #2c6a60;
	border-bottom: 1px solid #2c6a60;
}

/* 表字体颜色 */
#criterionId .ant-table {
	color: #bebebe;
	font-size: 12px;
}

#criterionId .ant-form-item-label>label {
	color: #9fb043;
}

#criterionId .ant-table-middle>.ant-table-content>.ant-table-body>table>.ant-table-tbody>tr>td {
	border-bottom: 1px solid #2c6a60;
	font-size: 16px;
	cursor: pointer;
	background-color: transparent;
	line-height: 27px;
}

#criterionId .operate-btn {
	/* display: flex; */
	margin-left: 12px;
	/* justify-content: space-evenly; */
}

.detail {
	color: rgb(44, 106, 96);
	border-color: rgb(44, 106, 96);
	margin-right: 3px;
	font-size: 20px;

}

/* 弹框部分 */
.ant-modal-content {
	background-color: #2b4341;
	margin-top: 52%;
	margin-left: -23%;
	width: 1099px;
	height: 567px;
}

.ant-modal-header {
	background: #2b4341;
	border: none;
}

.ant-modal-footer {
	/* background: transparent; */
	border: none;
}

.ant-modal-title {
	color: #00ffdc;
	font-weight: 500;
	font-size: 24px;
	line-height: 22px;
}

/* Form表单label */

.ant-form-item-label>label {
	color: #9fb043;
	font-size: 18px;
}

/* Form表单label */
.ant-form-item-label>label::after {
	content: '';
}
	::v-deep#criterionId .ant-table-tbody > tr > td {
  border-bottom: 1px solid #2c6a60;
  
}
	::v-deep#criterionId .ant-table-align-center{
  border-bottom: 1px solid #2c6a60;
  
}

	::v-deep#criterionId .ant-table-selection-column{
  border-bottom: 1px solid #2c6a60;
  
}
</style>
